<!DOCTYPE html>
<html>
<head>
  <!--
      Customize this policy to fit your own app's needs. For more guidance, see:
          https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
      Some notes:
          * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
          * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
          * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
              * Enable inline JS: add 'unsafe-inline' to default-src
      -->
  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com http://v.juhe.cn 'unsafe-eval' 'unsafe-inline' ws://*; style-src 'self' 'unsafe-inline'; media-src *; img-src * data:">

  <!-- Required meta tags-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="stylesheet" href="lib/font-awesome-4.5.0/css/font-awesome.min.css" />

  <title>Joke</title>
</head>

<!-- <body class="layout-dark theme-bluegray"> -->
<body>
  <!-- Status bar overlay for full screen mode (PhoneGap) -->
  <div class="statusbar-overlay"></div>

  <!-- Panels overlay-->
  <div class="panel-overlay"></div>
  <!-- Left panel with reveal effect-->
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>这里还没有东西，别说出去...</p>
    </div>
  </div>

  <!-- Views -->
  <div class="views">
    <div class="view view-main">
      <!-- Top Navbar-->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left"></div>
          <div id="main-navbar-text" class="center">笑话</div>
          <div class="right"></div>
        </div>
      </div>
      <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
      <div class="pages navbar-through">
        <div class="page toolbar-fixed" data-page="index">

          <div class="toolbar tabbar toolbar-bottom">
            <div class="toolbar-inner">
              <a href="#text-tab" class="tab-link active"><i class="fa fa-list"></i></a>
              <a href="#image-tab" class="tab-link"><i class="fa fa-image"></i></a>
              <a href="#favorite-tab" class="tab-link"><i class="fa fa-star"></i></a>
              <a href="#setting-tab" class="tab-link"><i class="fa fa-cog"></i></a>
            </div>
          </div> 

          <div class="page-content hide-bars-on-scroll">
            <div class="tabs">
              <div id="text-tab" class="tab pull-to-refresh-content active" data-ptr-distance="100">
                <div class="pull-to-refresh-layer">
                  <div class="preloader"></div>
                  <div class="pull-to-refresh-arrow"></div>
                </div>
                <div class="list-block virtual-list cards-list text-list"></div>
              </div>

              <div id="image-tab" class="tab pull-to-refresh-content" data-ptr-distance="100">
                <div class="pull-to-refresh-layer">
                  <div class="preloader"></div>
                  <div class="pull-to-refresh-arrow"></div>
                </div>
                <div class="list-block virtual-list cards-list image-list"></div>
              </div>

              <div id="favorite-tab" class="tab">
                <div class="list-block virtual-list cards-list favorite-list"></div>
              </div>

              <div id="setting-tab" class="tab">
                <div class="content-block-title">选项</div>
                <div class="list-block">
                  <ul>
                    <li class="item-content clearFav">
                      <div class="item-media"><i class="fa fa-exclamation-triangle color-red"></i></div>
                      <div class="item-inner">
                        <div class="item-title">清除缓存</div>
                        <div class="item-after">清除所有数据</div>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-media"><i class="fa fa-moon-o color-yellow"></i></div>
                      <div class="item-inner">
                        <div class="item-title">夜间模式</div>
                        <div class="item-after">
                          <label class="label-switch">
                            <input id="nightSwitch" type="checkbox">
                            <div class="checkbox"></div>
                          </label>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                    <!-- <li class="item-divider"> </li> -->
                <div class="content-block-title" style="margin-top: -40px;"></div>
                <div class="list-block">
                  <ul>
                    <li>
                      <a href="about.html" class="item-link item-content">
                        <div class="item-inner">
                          <div class="item-title">关于 Joke</div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
  <script type="text/javascript" src="js/init-styles.js"></script>
  <script type="text/javascript" src="js/my-app.js"></script>
</body>

</html>